.App {
  height: 100%;
  overflow: hidden;
  .layoutWrap {
    min-height: 100vh;
    .siderWrap {
      background-color: #00b894;
     
      :global(.ant-layout-sider-children) {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        width: inherit;
      }
      :global(.ant-layout-sider-trigger) {
        background-color: #00b894;
      }
      .menuWrap {
        color: #fff;
        background-color: #00b894;
        border-right-color: #00b894;
        position: relative;
      }
      .switch {
        margin: 30px 0;
        text-align: center;
      }
      .avatarWrap {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .name {
          margin: 10px auto;
          color: #fff;
          font-size: 0.8rem;
        }
        .date {
          color: #fff;
          font-size: 1.05rem;
        }
      }
    }
    .contentWrap {
      margin: 0 16px;
      width: calc(100% - 32px);
      .headerWrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        position: sticky;
        top: 0;
        // box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);

        .infoWrap {
          padding-right: 5px;
          font-size: 15px;

          :global(.ant-space-item) {
            .screen {
              transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;

              &:hover {
                transform: scale(1.5);
              }
            }
            // :global(.ant-badge) {
            .infoItem {
              transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
              transform: perspective(1px);
              &:hover {
                transform: translateY(-3px);
              }
            }
            .settingItem {
              transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
              &:hover {
                transform: scale(1.5);
                transform: rotate(540deg);
              }
            }
            // }
          }
          div:hover {
            cursor: pointer;
          }
        }
      }
      .content {
        // padding: 24px;
        background-color: #fff;
        // width: 92%;
        min-height: calc(100% - 40px);
      }
    }
    .footer {
      padding: 16px 50px;
      text-align: center;
    }
  }
}
